import { useState, useEffect } from 'react'
/* -------------------------------------------------------- antd -- */
import { Tabs } from 'antd'
/* -------------------------------------------------------- Declare -- */
const { $fn, $config, $lazy, $ } = window
/* -------------------------------------------------------- Async Component -- */
const Controls = $lazy.load(()=>import('#cpt/temp/Controls'))
const Scroll 	= $lazy.load(()=>import('@tp/scroll'))
const href = location.href.replace(location.origin)
/* -------------------------------------------------------- 菜单 -- */
const Index = ({
	className, 				/** @param {String}			# 盒子 className */
	out,					/** @param {Number}			# 在外部设置 value 值 */
	flex=1,					/** @param {Boolean}		# 是否弹性 */
	// data
	data, 					/** @param {Array}		 	# 数据 */
	idStr=$config.idStr,	/** @param {String}			# 提交字段名 */
	nameStr=$config.nameStr,/** @param {String}			# 显示字段名 */
	// 自定义
	gap=0, 					/** @param {Number}			# 间隙 */
	destroy,				/** @param {Boolean}		# 被隐藏时是否销毁 DOM 结构 */
	value=1,				/** @param {String}				# 当前显示项 */
	suffix, 				/** @param {String}			# 前缀 */
	keys,				/** @param {Array}			# keys */
	onChange,				/** @param {Event}			# 点击时执行 */
	//
	antd = {},				/** @param {Object}			# antd */
	// controls
	controls, 				/** @param {Number}			# 按钮配置 */
}) => {
	const [ key, setKey ] = useState( String(value) )
	const [ component, setComponent ] = useState( suffix )
	const [ items, setItems ] = useState( data ?? [])
	
	useEffect(()=> {
		const localKey = $fn.session(href)
		value = localKey ? String(localKey) : String(value)
	}, [ value ])
	
	antd = {
		className: `jzer-tabs ${$.css(flex,'ex')} ${$.css(className)}`,
		items,
		tabBarGutter: gap,
		activeKey: (out ? String(value) : key),
		tabBarExtraContent:component,
		tabBarStyle:{padding:0, margin:0},
		destroyInactiveTabPane: destroy,
		onChange: value => {
			$fn.session(href, value)
			if(!out){ setKey(value) }
			if(onChange){
				const index = data.findIndex( v => v[idStr] === String(value))
				const row = data[index]
				const label = row[nameStr]
				onChange?.({ value, index, row, label })
			}
		},
		...antd
	}
	
	
	useEffect(()=> { if( !out ) { setKey( String(value) ) } }, [ value ]) // eslint-disable-line
	
	useEffect(()=>{
		const items = data.map(v => {
			let children = v.slot
			if(v?.scroll){
				children = <Scroll className='p10' scroll='oys'>{ v.slot }</Scroll>
			}
			return { key: v[idStr], label:v[nameStr], disabled: v.disabled, children }
		})
		setItems( items )
	}, [ data, idStr, nameStr ])
	
	useEffect(() => {
		if(controls){
			const index = data.findIndex( v => v[idStr] === key)
			let ctrl = $fn.getResult( controls, { value:key, index, row: data[index], keys } )
			setComponent(<Controls
						key		= { key }
						size 	= { ctrl.size ?? 'small' }
						align 	= { ctrl.align }
						data	= { ctrl.data }
						className = 'mr10'
					/>)
		}
	}, [ key, keys, data, idStr, nameStr ]) // eslint-disable-line
	
	return (
		<Tabs {...antd}/>
	)
}
export default Index